【前端】不使用图片制作三角小图标 |
您所在的位置：网站首页 › 三角 图标 › 【前端】不使用图片制作三角小图标 |
【前端】不使用图片制作三角小图标
|
我的第一篇博客，希望大家多多支持！ 方法一：使用HTML特殊字符 HTML提供了很多好用的特殊字符，这样的字符像文字一样定制大小颜色，非常方便 1，向下的图标 ▼ ▼ 2，向上的图标 ▲ ▲ 3，向右的图标 ► ► 4，向左的图标 ◄ ◄ 方法二：使用css制作小图标 使用HTML+CSS相比特殊字符更加灵活，可以制作你想要的角度和比例，以下是制作方法： HTML：
对应的css： .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; /*更改底部大小还能改变三角的高度哦*/ } .triangle-right{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid red; } .triangle-bottom { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } .triangle-left{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid red; } 还可以做这样的三角哦： 对应的css： .triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } .triangle-topright{ width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } .triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; } .triangle-bottonleft{ width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; } 方法三：使用canvas制作小图标 HTML5推出了强大的canvas，他可不止是画三角的，我们这节讲的是画三角哦，好吧我就用它画个三角,效果如下： 
window.onload = function(){ var triangle = document.getElementById('triangle'); var ctx = triangle.getContext('2d'); ctx.fillStyle = '#f00'; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(300,0); ctx.lineTo(150,150); ctx.closePath(); ctx.fill(); } 方法四： svg制作 方法五：使用图标字体制作 这个方法的原理跟特殊字体是一样的，就是将小图标制作成字体包，用css的font-face引入进来 这个方法适用所有页面icon，我推荐的工具是 阿里的 iconfont，不过也有很多优秀图标字体库，都可以使用。
你在工作中遇到什么困难或前端方面的问题欢迎加我的群 ：229448745 咱们一起讨论吧！！
|
对应的HTML： 【本文地址】
今日新闻 |
推荐新闻 |